import React, { Component } from 'react'
import "./Index.scss"
import axios from "axios";
import {BASE_URL,GET_USER_INFO} from '../../utils/requestPath'
import { List, InputItem, WhiteSpace,Button,ImagePicker, Checkbox, Flex } from 'antd-mobile';
import Jsonp from 'jsonp'
import face from '../../assets/img/face.png'
import fiee from '../../assets/img/5555.gif'
import care1 from '../../assets/img/care1.gif'
import HomeStart from '../../assets/img/homestart.jpg'
import Logo from '../../assets/img/logo.jpg'
//添加路由
import {withRouter} from "react-router-dom"
import requestAxios from '../../utils/myaxios'
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
class Index extends Component {
  constructor(props){
    super(props);
    //李彪的引用
    this.goodListRef = React.createRef();
  }
  state = {
    header:[
      {
        id:0,
        name:"AcFun",
        title:"周边商城"
      }
    ],
    videoList:[],
    loginAdmin:"",
    videoaction:[],
    data_index:"",
    userTxt:"",
    phoneTxt:"",
    inputForm:false,
    startUp:false,
    registory:false,
    prize:false,
    indexStart:true,
    jhAddress:"",
    addressIp:"",
    citysList:"",
    addressIpUt:"",
    addressTxt:"",
    headerEsc:"<",
    footerZc:"<<隐私政策的>>"
  }

  //定义一个事件监听
  handlleClickVideo = (e) => {
    let data_index = e.target.getAttribute("data_index")
    this.setState({
      data_index
    })
      if(true){
          console.log("进来发请求了_查看会员信息")
          //1,获取当前用户的登录信息,从localStorage中获取
          let carts_str = localStorage.getItem("userinfo");
          let carts = JSON.parse(carts_str || "[]")
          let telephone = carts.telephone
          console.log(carts.telephone)
          if(telephone){
            //发请求看会员的信息
            axios.post("http://115.29.148.10:8989/payOrderAll?telephone="+telephone).then((res)=>{
              let vipstart = false; 
              res.data.map((v,i)=>{
                console.log(v.trade_state)
                if(v.trade_state === "SUCCESS"){
                  vipstart = true
                }
              })
              if(vipstart){
                this.props.history.push("/videoDetails/?vid="+this.state.data_index);
              }else{
                alert("您还不是会员")
              }
              //第二次遍历
            //  let noPay = res.data.filter(function(x){
            //     return x.trade_state != "SUCCESS"
            //   })
            //   console.log("filter打印测试是否是会员")
            //   console.log(noPay)
              
              //判断里面是否有success,如果没有就是空
            }).catch((err)=>console.log(err))
          }

      }else{
        console.log("点击进来了")
        let vid = e.target.getAttribute("data_index");
        console.log(vid)
        this.props.history.push("/videoDetails/?vid="+vid);
      }
  }
  
  //点击跳转到登录页面
  handleVideo = (e) => {
    this.props.history.push("/login")
  }
  
  //进入精选界面
  handleJinxuan = (e) => {
    console.log("精选界面进来了")
    let vid = e.target.getAttribute("data_index");
        console.log(vid)
        this.props.history.push("/videoDetails/?vid="+vid);
  }
  

  // 数据加载发请求
   async componentDidMount(){
    //获取所有用户
    // axios.get(BASE_URL+"/api/user/findAll",{}).then(res=>{
    //   console.log(res)
    // })

    //启动页定时器
    await setTimeout(()=>{
      this.setState({
        indexStart:false,
        registory:true
      })
      //m
      //localStorage.setItem("userinfo","lskdjlfks00")
      //判断用户缓存数据,如果有数据就直接跳到登陆页,没有localStorage存储就跳到注册页
     const userInfo =  localStorage.getItem("userinfo");
     if(userInfo === null || userInfo === undefined || userInfo ===""){
      this.props.history.push("/register")
     }else{
      this.props.history.push("/login")
     }
      
    },3000)


    console.log("搜狐api获取获取当前ip地址")
    //获取当前ip地址---搜狐api获取
    await axios.get(""+"/cityjson?ie=utf-8").then(res=>{
        //console.log(res.data)
        let city = res.data;
        let cityUt = city.split(":")[1].split(",")[0];
        let citys = city.split(":")[1].split(",")[0].replace('"','').replace('"','').replace(" ","");
        this.setState({
          addressIp:citys,
          addressIpUt:cityUt
        })
        
        console.log(citys)
      })
   

      await console.log(this.state.addressIp)
      const ipt = this.state.addressIp
      console.log("ipt:"+typeof(ipt)+ipt)
     

    await axios.get("https://route.showapi.com/632-1?showapi_appid=734024&showapi_timestamp=20210814160315&showapi_sign=2eefd700317c4359bc749b0436fce8d8").then(res=>{
      console.log("全球api调用地址--------------------------")
      console.log(res.data)
        this.setState({
          addressIp:res.data.showapi_res_body.ip,
          addressTxt:res.data.showapi_res_body.region
      })
    })
  }

  handleClick = () => {
    console.log("点击了")
    //this.inputRef.focus();
    console.log(this.state.userTxt)
    console.log(this.state.phoneTxt)
    axios.post(BASE_URL+"/api/user/add/userInfo",{
      userName:this.state.userTxt,
      telephone:this.state.phoneTxt
    }).then(res=>{
      if(res.data){
        alert("数据添加成功")
      }else{
        alert("数据请求失败")
      }
    })
  }

  //启动页配置
  indexStart = ()=>{
    return <div
    style={{fontSize:20,transition:'all'}}
    >
       <img 
          style={{width:"100%",height:"100%",marginTop:0}}
          src={HomeStart}/>
    </div>
  }

  //表单配置
  inputForm = ()=>{
    return <div>
      <List renderHeader={() => 'Customize to focus'}>
          <InputItem
            clear
            placeholder="用户名"
            value={this.state.userTxt}
            onChange={txt=>this.setState({userTxt:txt})}
          >用户名</InputItem>
          <InputItem
            clear
            placeholder="手机号"
            value={this.state.phoneTxt}
            onChange={txt=>this.setState({phoneTxt:txt})}
          >手机号</InputItem>

          <List.Item>
            <Button type="primary" onClick={this.handleClick}>Register</Button>
          </List.Item>
        </List>
    </div>
  }

  onChange = (val) => {
    console.log(val);
  }

  //注册页
  registory = ()=>{
    const {headerEsc,footerZc} = this.state
  
    return (
      <div className="main-app">
          {/* 顶部返回键 */}
          <header className="main-header">
              {/* 返回箭头 */}
              <section className="main-header-esc">{headerEsc}</section>
              {/* 欢迎 */}
              <seciton className="main-header-hello">你好,</seciton>
              {/* 欢迎来到....EZblu */}
              <div className="main-header-ezblu">
                  <section className="main-header-hello-font">欢迎来到</section>
                  <img className="main-header-hello-img" src={Logo}></img>
              </div>
          </header>

          {/* 中部 from表单页 */}
          <main className="app-main">
              <input className="app-main-phone" type="text" placeholder="输入手机号">

              </input>

              <input className="app-main-email" type="text" placeholder="邮箱">

              </input>

              <select className="app-main-qd" placeholder="渠道">
                  <option value ="volvo">亚马逊</option>
                  <option value ="saab">乐天</option>
                  <option value="opel">其他</option>
              </select>


              <input className="app-main-pass" type="password" placeholder="密码">
              
              </input>
          </main>

        {/* 记住密码 */}
        <div className="app-pass">
            <Flex>
            <Flex.Item>
              <AgreeItem style={{fontWeight:'bold'}} data-seed="logId" onChange={e => console.log('checkbox', e)}>
              <a onClick={(e) => { e.preventDefault()}} style={{fontWeight:'bold'}}>记住密码</a>
              </AgreeItem>
            </Flex.Item>
          </Flex>
        </div>

        {/* 登陆按钮 */}
        <div className="app-login">
          <div className="app-login-botton">
            <Button className="app-login-botton-con" type="primary" style={{backgroundColor:"rgb(107, 192, 223)",fontWeight:"800",border:"none"}}>注册</Button></div>
        </div>
        {/* <Button type="primary"  style={{background:"skyblue"}}>登陆</Button> */}

        {/* 底部按钮 */}
        <div className="app-privacy-policy">
          <Flex>
              <Flex.Item>
                <AgreeItem style={{fontWeight:'bold',fontSize:12}} data-seed="logId" onChange={e => console.log('checkbox', e)}>
                <a style={{fontWeight:400,fontSize:12}} onClick={(e) => { e.preventDefault()}} >注册即表示同意<a style={{color:"rgb(54, 219, 255)"}}>{footerZc}</a></a>
                </AgreeItem>
              </Flex.Item>
            </Flex>
        </div>

      </div>
    )
  }

  register=()=>{
    //点击后跳转注册
    setTimeout(()=>{
      this.props.history.push("/inputForm");
    },500)
  }

  //活动页
  prize = ()=>{
    return <div>活动页</div>
  }

  render() {
    //console.log(this.props)
    const {citysList} = this.state;
    return (
      <div style={{widht:"100%",height:"100%"}}>
         {this.state.indexStart?this.indexStart():""}
          {this.state.registory?this.registory():""}

      </div>
    )
  }
}

export default withRouter(Index)
